<template>
  <div class="wx-callback">
    <div class="loading-container">
      <div class="loading-spinner"></div>
      <p>正在处理微信登录...</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'WXCallback',
  setup() {
    const route = useRoute()

    onMounted(() => {
      const params = new URLSearchParams(window.location.search)
      const code = params.get('code')
      // const state = params.get('state')

      if (code) {
        // 将授权码发送回父窗口
        if (window.opener) {
          window.opener.postMessage({ type: 'WX_LOGIN_CODE', code }, '*')
        }
        window.close()
      } else {
        console.error('未获取到授权码')
        window.close()
      }
    })

    return {}
  }
})
</script>

<style scoped>
.wx-callback {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f9fa;
}

.loading-container {
  text-align: center;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f0f0f0;
  border-top: 3px solid #07C160;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.loading-container p {
  margin: 0;
  font-size: 16px;
  color: #333;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 